<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            display: flex;
        }

        li {
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }

        .on {
            border-radius: 50%;
            border: 1px solid #000;
        }
    </style>
</head>

<body>

    <ul>
        <li>1</li>
        <li class="on">2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <script>

        // 事件流 ：页面接受事件的顺序
        //    事件冒泡流
        //    事件捕获流

        // 事件冒泡：
        //     子元素的事件会触发父元素的同类型事件
        //     阻止事件冒泡   (结合案例 --- 模拟下拉菜单)

        // 事件委托   --- 很多的元素都绑定了同类型事件
        //    委托给父元素    判断目标源  
        //    原理：基于事件冒泡
        //    优点：减少事件处理函数，可以给将来的 对象添加事件 
        //    使用事件委托的时候，注意  不使用this  而是使用 e.target


        // 分页
        //    变量  控制显示第几页  page = 1  
        //    总共多少数据      后端给的数组   length
        //    每一页有多少数据   UI给的  pageLen = 7
        //    总共有多少页？     length / pageLen   除不尽  向上取整

        //   第一页   0-8
        //   第二页   8-16
        //   第三页   16-24
        //   第四页   24-32  总共有28条数据   24-28

        //   第page页   (page-1) * pageLen --  page * pageLen

        //   上翻页 page--
        //   下翻页  page++



        // box  a 

        // a.onclick = function () { }
        // box.onclick = function () { }
        // // 点击a的时候  两个事件都会触发  a  box


        // a.onclick = function () { }
        // box.onmouseover = function () { }   // 没有事件冒泡


        // 需要给每个li绑定事件
        var oUl = document.querySelector('ul');
        var oLis = oUl.querySelectorAll('li');
        oUl.onclick = function (e) {
            if (e.target.tagName === 'LI') {
                for (var i = 0; i < oLis.length; i++) {
                    oLis[i].classList.remove('on');
                }
                e.target.classList.add('on');
            }
        }

    </script>

</body>

</html>